<template>
  <div class="EChartsSelect-container">
    <div class="navigator-btn">
      <el-button :plain="!(curEditChartType === ChartType.BAR)" type="primary" @click="changeChartType(ChartType.BAR)">
        柱状图
      </el-button>
    </div>
    <div class="navigator-btn">
      <el-button :plain="!(curEditChartType === ChartType.LINE)" type="primary"
        @click="changeChartType(ChartType.LINE)">
        折线图</el-button>
    </div>
    <div class="navigator-btn">
      <el-button :plain="!(curEditChartType === ChartType.PIE)" type="primary" @click="changeChartType(ChartType.PIE)">
        饼图
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { chartStore } from '../../store/index'

import { ChartType, chartDefaultConfig } from '../../types/EChartsTypes'
import { computed, ComputedRef } from 'vue';

const store: any = chartStore()

const curEditChartType: ComputedRef = computed(() => {
  return store.curEditChartType
})

// 更换图表类型
const changeChartType = (type: string) => {
  store.setCurEditChartType(type)
  updateSeries(type)
}

// 更新图表配置项
function updateSeries(type: string) {
  switch (type) {
    case ChartType.BAR:
      store.resetForm(chartDefaultConfig().BAR())
      break
    case ChartType.LINE:
      store.resetForm(chartDefaultConfig().LINE())
      break
    case ChartType.PIE:
      store.resetForm(chartDefaultConfig().PIE())
      break
  }
}
</script>

<style lang="less" scoped>
@navigator-width: 15vw;

.EChartsSelect-container {
  width: @navigator-width;
  box-sizing: border-box;
  padding: 10px;
  border-right: 1px solid #e9e9e9;

  .navigator-btn {
    margin: 10px 0;

    &:first-child {
      margin: 0;
    }
  }
}

.el-button {
  width: 100%;
  height: 40px;
}
</style>
